<!DOCTYPE html>
<html>

<head lang='zh'>
	<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
	<title>Luckysheet</title>

	<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
	<link rel='stylesheet' href='./plugins/plugins.css' />
	<link rel='stylesheet' href='./css/luckysheet.css' />
	<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
	<link rel='stylesheet' href='./assets/iconfont2/iconfont.css' />

	<!-- // nby 新增"年月" -->
	<link rel="stylesheet" href="./assets/monthSelect/style.css">


	<script src="./plugins/js/plugin.js"></script>

	<!-- rollup luckysheet.js -->
	<script src="./luckysheet.umd.js"></script>

	<link rel="stylesheet" href="./assets/viewer/viewer.min.css">
	<script src="./assets/viewer/viewer.min.js"></script>
	<style>
		/* .numInput.flatpickr-minute{
	-webkit-touch-callout:none; 
	-webkit-user-select:none; 
	-moz-user-select:none;
	-ms-user-select:none; 
	user-select:none;
} */

		body {
			overflow: hidden !important;
		}

		.superScript {
			position: relative;
			top: -3px;
			display: inline-block;
			transform: scale(.8);
		}

		.subScript {
			position: relative;
			bottom: -3px;
			display: inline-block;
			transform: scale(.8);
		}

		#mySaixuanDiv:hover #myAsc {
			border-right: 1px solid #CFCFD1 !important;
		}


		#importConDiv:hover #luckysheet-icon-import {
			border-right: 1px solid #CFCFD1 !important;
		}

		#luckysheet-icon-fmt-other:hover .luckysheet-toolbar-menu-button-caption {
			border-right: 1px solid #CFCFD1 !important;
		}

		#luckysheet-icon-font-family:hover .luckysheet-toolbar-menu-button-caption {
			border-right: 1px solid #CFCFD1 !important;
		}

		#luckysheet-icon-font-size:hover .luckysheet-toolbar-combo-button-caption {
			border-right: 1px solid #CFCFD1 !important;
		}

		#luckysheet-icon-postil:hover .luckysheet-toolbar-menu-button-caption {
			border-right: 1px solid #CFCFD1 !important;
		}

		#luckysheet-icon-conditionformat:hover #right_conditionformat {
			border-right: 1px solid #CFCFD1 !important;
		}

		#luckysheet-icon-seachmore:hover #left_seachmore {
			border-right: 1px solid #CFCFD1 !important;
		}




		/* nby 隐藏底部两块按钮 */
		/* .luckysheet-stat-area,#luckysheet-sheet-area{
	display: none!important;
}
.luckysheet-grid-window{
background-color: white!important;
} */

		/* nby 隐藏底部两块按钮  END */




		/* .luckysheet-postil-show{
			display: none!important;
		}

		#luckysheet-postil-showBoxs{
			display: none!important;
		
		} */
	</style>
</head>

<body>

	<div id="luckysheet22" style="position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
	<!-- <iframe src="./assets/chromePrint/print.html" id="chromePrintIframe"
		style="position: absolute;left: -400px;top: -400px;" frameborder="0"></iframe> -->

	<div id="btn"
		style='z-index:999;background-color: red;width: 60px;height: 60px;position: fixed;cursor: pointer;bottom: 80px;left: 30px;'>
		测试</div>


	<script src="./demoData/demoFeature.js"></script>
	<script src="./demoData/sheetFormula.js"></script>
	<script src="./demoData/sheetCell.js"></script>
	<script src="./demoData/sheetConditionFormat.js"></script>
	<script src="./demoData/sheetTable.js"></script>
	<script src="./demoData/sheetComment.js"></script>
	<script src="./demoData/sheetPivotTableData.js"></script>
	<script src="./demoData/sheetPivotTable.js"></script>
	<script src="./demoData/sheetSparkline.js"></script>
	<script src="./demoData/sheetChart.js"></script>
	<script src="./demoData/sheetPicture.js"></script>
	<script src="./demoData/sheetDataVerification.js"></script>

	<script>

		function foo(httpPath, token = '') {
			if (!httpPath) {

				return
			}
			fetch(httpPath, {
				method: 'GET',
				headers: {
					'Content-Type': 'application/json',
					'token': token
				}
			})
				.then(response => response.json())
				.then(async (res) => {
					let sheetCell222 = res


					// According to the browser language
					var lang = luckysheetDemoUtil.language() === 'zh' ? 'zh' : 'en';
					var options = null;

					options = {
						data: [...sheetCell222],
						showinfobar: false,
						container: 'luckysheet22',
						lang: lang,
						allowEdit: true,
						// isFormApp: true,  //数字表格
						cellRightClickConfig: {
							indicator: false
						},
						showGridLines: false,
						plugins: ['chart'],
						hook: {
							workbookCreateAfter(a) {
							},
							rangeValueUpdated(val) {
								console.log('9999endddd', val);
							},
							rangeValueUpdateBefore() {
								console.log('8888');
							},
							cellUpdated(a, b, c, d) {
								console.log('cellUpdateddd', '-------');

								console.log(a, b, c, d);

							},
							cellDragStop: function (cell, postion, sheetFile, ctx, event) {
								// console.info(cell, postion, sheetFile, ctx, event);
							},
							rowTitleCellRenderBefore: function (rowNum, postion, ctx) {
								// console.log(rowNum);
							},
							rowTitleCellRenderAfter: function (rowNum, postion, ctx) {
								// console.log(ctx);
							},
							columnTitleCellRenderBefore: function (columnAbc, postion, ctx) {
								// console.log('99');
							},
							columnTitleCellRenderAfter: function (columnAbc, postion, ctx) {
								// console.log(postion);
							},
							cellRenderBefore: function (cell, postion, sheetFile, ctx) {
								// console.log(cell,postion,sheetFile,ctx);
							},
							cellRenderAfter: function (cell, postion, sheetFile, ctx) {

							},
							cellMousedownBefore: function (cell, postion, sheetFile, ctx) {

							},
							cellMousedown: function (cell, postion, sheetFile, ctx, which) {
								if (luckysheet.getFreezeAllowEdit() == false) {
									luckysheet.changeAllowEdit(false)
									setTimeout(() => {
										// 默认整张表是不可编辑的
										const ranveVal = luckysheet.getRangeValue()
										// 范围单元格只要有单元格的e不是true就整个不允许编辑
										let isAllowEdit = true
										ranveVal.forEach(arr => {
											arr.forEach(cellItem => {
												if (cellItem?.e != true) {
													isAllowEdit = false
													return
												}
											})
										})

										luckysheet.changeAllowEdit(isAllowEdit)
										console.log('cellMouseDown', luckysheet.getStore().allowEdit);

									})
								}
							},

							sheetMousemove: function (cell, postion, sheetFile, moveState, ctx) {
								// console.log(cell,postion,sheetFile,moveState,ctx);
							},
							sheetMouseup: function (cell, postion, sheetFile, moveState, ctx) {
								// console.log(cell,postion,sheetFile,moveState,ctx);
							},
							cellAllRenderBefore: function (data, sheetFile, ctx) {
								// console.info(data,sheetFile,ctx)
							},
							updated: function (operate) {

								console.log(operate, 'updated...');

								// console.info('update',operate)		
								// console.log(operate,'9999999999');
							},
							cellUpdateBefore: function (r, c, value, isRefresh) {
								// console.info('cellUpdateBefore',r,c,value,isRefresh)

							},

							sheetActivate: function (index, isPivotInitial, isNewSheet) {
								// console.info(index, isPivotInitial, isNewSheet)
							},

							rangeSelect: function (index, sheet) {
								// console.info(index, sheet)
							},
							commentInsertBefore: function (r, c) {
								// console.info(r, c)
							},
							commentInsertAfter: function (r, c, cell) {
								// console.info(r, c, cell)
							},
							commentDeleteBefore: function (r, c, cell) {
								// console.info(r, c, cell)
							},
							commentDeleteAfter: function (r, c, cell) {
								// console.info(r, c, cell)
							},
							commentUpdateBefore: function (r, c, value) {
								// console.info(r, c, value)
							},
							commentUpdateAfter: function (r, c, oldCell, newCell) {
								// console.info(r, c, oldCell, newCell)
							},
							cellEditBefore: function (range) {
								// luckysheet.changeAllowEdit(false)

							},

							rangePasteBefore: function (range, data) {
								// console.info('rangePasteBefore',range,data)
								// return false; //Can intercept paste
							},


						},
					}


					options.loading = {
						image: () => {
							return `<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none"></circle>
					</svg>`
						},
						imageClass: "loadingAnimation"
					}
					options.cellRightClickConfig = {
						customs: [{
							title: 'test',
							onClick: function (clickEvent, event, params) {
								console.log('function test click', clickEvent, event, params)
							}
						}]
					}
					luckysheet.create(options);


				}
				)
		}


		let httpPath = 'http://localhost:3000/assets/newD/表格数据.txt'//可以换成远程地址
		let token = ''
		foo(httpPath, token)



	</script>
	<style>
		/* 自定义loading演示样式 */
		@keyframes loading-rotate {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		@keyframes loading-dash {
			0% {
				stroke-dasharray: 1, 200;
				stroke-dashoffset: 0;
			}

			50% {
				stroke-dasharray: 90, 150;
				stroke-dashoffset: -40px;
			}

			100% {
				stroke-dasharray: 90, 150;
				stroke-dashoffset: -120px;
			}
		}

		.loadingAnimation {
			width: 3em;
			height: 3em;
			animation: loading-rotate 2s linear infinite;
		}

		.loadingAnimation circle {
			animation: loading-dash 1.5s ease-in-out infinite;
			stroke-dasharray: 90, 150;
			stroke-dashoffset: 0;
			stroke-width: 2;
			stroke: currentColor;
			stroke-linecap: round;
		}
	</style>
</body>

</html>